<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>C</title>
    <style>
      html, body {
        height: 100%;
      }
      body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .btn {
        width: min(80vw, 80vh);
        height: min(80vw, 80vh);
        border: min(5vw, 5vh) solid black;
        border-radius: 50%;
        background-color: yellow;
        text-align: center;
        line-height: min(80vw, 80vh);
        font-size: min(60vw, 60vh);
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }
      .btn-active {
        background-color: lime;
      }
    </style>
  </head>
  <body>
    <div class="btn">C</div>
    <script>
      const ctx = new AudioContext()
      let source = null
      const btn = document.querySelector('.btn')
      function startC(e) {
        e.preventDefault()
        if (source) return
        source = ctx.createOscillator()
        source.type = 'sine'
        source.frequency.value = 440 * Math.pow(2, 1 / 4)
        source.connect(ctx.destination)
        source.start()
        btn.classList.add('btn-active')
      }
      function stopC(e) {
        e.preventDefault()
        if (!source) return
        source.stop()
        source = null
        btn.classList.remove('btn-active')
      }
      btn.addEventListener('mousedown', startC)
      btn.addEventListener('touchstart', startC)
      btn.addEventListener('mouseup', stopC)
      btn.addEventListener('touchend', stopC)
      btn.addEventListener('touchcancel', stopC)
    </script>
  </body>
</html>
